<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>统战成员学习平台</title>
    <link rel="stylesheet" type="text/css" href="../../css/base.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/discovery.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/viewer.min.css"/>

    <style>
        .curMsg {
            background-color: #D0D0D0
        }
    </style>
</head>
<body class="white">
<div id='app' class="discovery" style="display:none" v-show="true">
    <div v-if="msgCount>0" class="top ui_border_b">
        <span @click="openWin('../discovery/discovery_comment_win')" class="new">{{msgCount}}条消息</span>
    </div>
    <transition-group name="list" tag="ul" class="discovery_list">
        <li v-for="(item, index) of items" :key="item" class="ui_border_b" @touchstart="touchstart()">
            <img @click="openWin('../discovery/user_detail_win', {userId: item.userId})" class="user_head" :src="imageBasePath + item.usrImg"
                 onerror="this.src=''">
            <p @click="openWin('../discovery/user_detail_win', {userId: item.userId})" class="name" v-text="item.usrName"></p>
            <p tapmode="tap" @click="openWin('../discovery/moment_detail_win', {studyMomentId: item.studyMomentId})" class="content" v-html="item.content"></p>
            <ul tapmode="tap" v-if="item.imgList.length" class="imgs" :class="{'four': item.imgList.length===4}">
                <li v-for="(img, i) of item.imgList">
                    <img :key="img.imgUrl + '-' + i"
                         :src="imageBasePath + img.imgUrl"
                         @click="photoBrowser()"
                         style="width: 100%;height: 100%;object-fit: cover;">
                </li>
            </ul>
            <div class="time">
                <span>{{item.createDate | formatMomentDate}}</span>
                <span v-if="item.userId===loginUser.usrId" class="delSM" @click="delSM(item.studyMomentId)">删除</span>
                <transition name="scaleFromRight">
                    <div @touchstart.stop class="caozuo_warp" v-if="index === zanIndex"><span @click="vote(item.studyMomentId, item, item.voteUserList)">
								<i class="icon_dis_zan"></i>{{item.voteState ? '取消' : '赞'}}</span><span @click="comment($event, item)">
									<i class="icon_dis_comm"></i>评论</span>
                    </div>
                </transition>
                <span @touchstart.stop="commOrZan(index)" class="caozuo"><i class="icon_dis_caozuo"></i></span>
            </div>
            <div v-if="item.voteUserList.length || item.msgList.list.length" class="bottom">
                <div v-if="item.voteUserList.length" class="zan">
                    <i class="icon_dis_zaned"></i>
                    <span v-for="(voteUser,index) of item.voteUserList"><i v-if="index > 0">, </i>{{voteUser.usrName}}</i>
                </div>
                <ul v-if="item.msgList.list.length" class="comment ui_border_t">
                    <!-- @click="comment($event, item, msg.userId, msg.usrName)" -->
                    <p :class="{'curMsg': curMsgId===msg.studyMomentMsgId}" @touchstart="showDeleteButton(msg.studyMomentMsgId,msg.userId,item)" @click="comment($event, item, msg.userId, msg.usrName)" @touchend="clearLoop" v-for="msg of item.msgList.list">
                        <span>{{msg.usrName}}</span>{{msg.replyUserId ? '回复 ' : '' }}
                        <span v-if="msg.replyUserId" v-text="msg.replyUserName"></span>: {{msg.replyContent}}
                    </p>
                    <p v-if="!item.msgList.isLastPage" @click="nextCommentPage(item.studyMomentId, item.msgList)">点击查看更多评论</p>
                </ul>
            </div>
        </li>
        <li v-if="loaded" class="no_more" key="-1">已经到底了</li>
    </transition-group>
    <transition name="fade">
        <spinner v-if="loading"></spinner>
    </transition>
    <div @touchstart.stop v-if="replaying" class="replay_warp ui_border_t" :class="replayTextClass">
        <textarea v-model="replayText" id="replayText" :placeholder="replyUserName.length > 0 ? ('回复'+replyUserName+'：') : ''"></textarea>
        <textarea v-model="replayText" id="replayTextClone" style="height:0;visibility: hidden;"></textarea>
        <span @click="commentSubmit()" :class="{'disable': replayText.length === 0}">发送</span>
    </div>
</div>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../../script/viewer.min.js"></script>
<script type="text/javascript" src="../../script/jquery-viewer.min.js"></script>
<script type="text/javascript" src="../../script/layer_mobile/layer.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            curMsgId: '',
            imageBasePath: imageBasePath,
            scrollTop: 0,
            zanIndex: -1,
            replaying: false,
            replayText: '',
            replayTextClass: '',
            replayStudyMoment: {},
            replyUserId: 0,
            replyUserName: '',
            items: [],
            loading: false,
            loaded: false,
            pageNum: 1,
            pageSize: 10,
            msgNum: 50,
            msgCount: 0,
            loginUser: {}
        },
        watch: {
            replayText: function () {
                var $this = this;
                var replayTextClone = $api.byId('replayTextClone');
                if (replayTextClone) {
                    var rows = Math.round((replayTextClone.scrollHeight - 6) / 24);
                    $this.replayTextClass = rows >= 3 ? 'three' : rows === 2 ? 'two' : '';
                }
            }
        },
        mounted: function () {
            var $this = this;
            apiready = function () {
                api.parseTapmode();
                $this.getList();
                $this.newMsgCount();
                api.addEventListener({
                    name: 'discovery_frm_totop_event'
                }, function (ret, err) {
                    api.pageUp({'top': true}, function () {
                    });
                });

                onScrollToBottom(function () {
                    if ($this.loaded) return;
                    $this.getList()
                })

                api.addEventListener({
                    name: 'refresh_moments_event'
                }, function (ret, err) {
                    $this.pageNum = 1;
                    $this.loaded = false;
                    $this.items = [];
                    $this.getList();
                    $this.newMsgCount();
                });
                api.addEventListener({
                    name: 'refresh_newmessagecount_event'
                }, function (ret, err) {
                    $this.newMsgCount();
                });
                api.setRefreshHeaderInfo({
                    bgColor: '#fff',
                    textColor: '#aaa',
                    textDown: '下拉刷新...',
                    textUp: '松开刷新...'
                }, function (ret, err) {
                    $this.pageNum = 1;
                    $this.loaded = false;
                    $this.getList(true);
                    $this.newMsgCount();
                });
            }
        },
        methods: {
            newMsgCount: function () {
                var $this = this;
                post('/client/studyMoment/newMsgCount', {}, function (ret) {
                    if (ret.isSuccess) {
                        $this.msgCount = ret.data
                    }
                })
            },
            getList: function (refresh) {
                var $this = this;
                if ($this.loading) return;
                $this.loading = true;
                var loginUser = $api.getStorage(_.USERINFO);
                $this.loginUser = loginUser;
                post('/client/studyMoment/findMyVoteAndMsg', {
                    pageNum: $this.pageNum,
                    pageSize: $this.pageSize,
                    msgNum: $this.msgNum
                }, function (ret) {
                    $this.loading = false;
                    if (refresh) {
                        api.refreshHeaderLoadDone();
                        $this.items = []
                    }
                    if (ret.isSuccess) {
                        ret.data.list.forEach(function (item) {
                            $this.items.push(item)
                        });
                        ret.data.isLastPage ? $this.loaded = true : $this.pageNum++;
                        parseTapmode();
                    } else {
                        msgUtil.toast({
                            msg: ret.message
                        })
                    }
                });
            },
            getMsgList: function (studyMomentId, msgList) {
                var $this = this;
                post('/client/studyMoment/getMsgList', {
                    studyMomentId: studyMomentId,
                    pageNum: 1,
                    pageSize: $this.msgNum
                }, function (ret) {
                    if (ret.isSuccess) {
                        msgList.list = [];
                        ret.data.list.forEach(function (item) {
                            msgList.list.push(item)
                        })
                        msgList.nextPage = ret.data.nextPage;
                        msgList.isLastPage = ret.data.isLastPage;
                        parseTapmode();
                    } else {
                        msgUtil.toast({
                            msg: ret.message
                        });
                    }
                });
            },
            nextCommentPage: function (studyMomentId, msgList) {
                var $this = this;
                if (msgList.isLastPage) return;
                post('/client/studyMoment/getMsgList', {
                    studyMomentId: studyMomentId,
                    pageNum: msgList.nextPage,
                    pageSize: $this.msgNum
                }, function (ret) {
                    if (ret.isSuccess) {
                        ret.data.list.forEach(function (item) {
                            msgList.list.push(item)
                        })
                        msgList.nextPage = ret.data.nextPage;
                        msgList.isLastPage = ret.data.isLastPage;
                        parseTapmode();
                    } else {
                        msgUtil.toast({
                            msg: ret.message
                        });
                    }
                });
            },
            touchstart: function () {
                this.zanIndex = -1;
                api.setFrameAttr({
                    name: 'discovery_frm',
                    bounces: true
                });
                if (this.replaying) {
                    document.body.classList.remove('full_body');
                    app.classList.remove('full');
                    document.body.scrollTop = document.documentElement.scrollTop = this.scrollTop;
                    this.replaying = false;
                }
            },
            commOrZan: function (index) {
                this.zanIndex = this.zanIndex === index ? -1 : index;
            },
            vote: function (studyMomentId, item, list) {
                var $this = this;
                $this.zanIndex = -1;
                var userInfo = $api.getStorage(_.USERINFO);
                post('/client/studyMoment/vote', {
                    studyMomentId: studyMomentId,
                    voteAction: item.voteState ? 0 : 1
                }, function (ret) {
                    if (ret.isSuccess) {
                        item.voteState ? list.some(function (item, index) {
                            if (item.userId === userInfo.usrId) {
                                list.splice(index, 1);
                                return;
                            }
                        }) : list.push({userId: userInfo.usrId, usrName: userInfo.usrName});
                        item.voteState = !item.voteState;
                    } else {
                        msgUtil.toast({
                            msg: ret.message
                        })
                    }
                });
            },
            comment: function ($event, replayStudyMoment, replyUserId, replyUserName) {
                var $this = this;
                var userInfo = $api.getStorage(_.USERINFO);
                if (replyUserId === userInfo.usrId) return;
                $this.scrollTop = document.scrollingElement.scrollTop;
                app.classList.add('full');
                app.scrollTop = $this.scrollTop;
                document.body.classList.add('full_body');
                api.setFrameAttr({
                    name: 'discovery_frm',
                    bounces: false
                });
                $this.replayText = $this.replayStudyMoment === replayStudyMoment ? $this.replayText : '';
                $this.replyUserId = 0;
                $this.replyUserName = '';
                $this.zanIndex = -1;
                $this.replaying = true;
                $this.replayStudyMoment = replayStudyMoment;
                $this.replyUserId = replyUserId || 0;
                $this.replyUserName = replyUserName || '';
                $this.$nextTick(function () {
                    var replayTextClone = $api.byId('replayTextClone');
                    var replayText = $api.byId('replayText');
                    if (replayTextClone) {
                        var rows = Math.round((replayTextClone.scrollHeight - 6) / 24);
                        $this.replayTextClass = rows >= 3 ? 'three' : rows === 2 ? 'two' : '';
                    }
                    replayText.focus();
                    // fix keyboard hide message when replaying
                    window.onresize = function () {
                        if ($this.replaying) {
                            var h = $event.clientY - document.body.offsetHeight + $api.offset(document.querySelector('.replay_warp')).h + 20;
                            app.scrollTop = app.scrollTop + (h > 0 ? h : 0)
                        }
                    }
                })
            },
            commentSubmit: function () {
                var $this = this;
                if ($this.replayText.length === 0) return;
                var userInfo = $api.getStorage(_.USERINFO);
                post('/client/studyMoment/addMsg', {
                    studyMomentId: $this.replayStudyMoment.studyMomentId,
                    msgContent: $this.replayText,
                    replyUserId: $this.replyUserId === 0 ? null : $this.replyUserId
                }, function (ret) {
                    if (ret.isSuccess) {
                        document.body.classList.remove('full_body');
                        app.classList.remove('full');
                        document.body.scrollTop = document.documentElement.scrollTop = $this.scrollTop;
                        $this.replaying = false;
                        api.setFrameAttr({
                            name: 'discovery_frm',
                            bounces: true
                        });
                        $this.getMsgList($this.replayStudyMoment.studyMomentId, $this.replayStudyMoment.msgList);

                        $this.replayText = '';
                        $this.replyUserId = 0;
                        $this.replyUserName = ''
                    } else {
                        msgUtil.toast({
                            msg: ret.message
                        })
                    }
                });
            },
            photoBrowser: function () {
                var $this = this;
                $('.imgs').viewer({
                    navbar: false,
                    toolbar: false,
                    title: false
                });
            },
            delSM: function (studyMomentId) {
                var $this = this;
                api.confirm({
                    title: '提示',
                    msg: '确认删除该条互动吗？',
                    buttons: ['确定', '取消']
                }, function (ret, err) {
                    if (ret.buttonIndex === 1) {
                        post('/client/studyMoment/del', {
                            studyMomentId: studyMomentId
                        }, function (ret) {
                            msgUtil.toast({
                                msg: ret.message
                            })
                            if (ret.isSuccess) {
                                $this.pageNum = 1;
                                $this.getList(true);
                            }
                        });
                    }
                });
            },
            showDeleteButton: function (studyMomentMsgId, userId, curStudyMoment) {
                var $this = this;
                $this.curMsgId = studyMomentMsgId;
                var userInfo = $api.getStorage(_.USERINFO);
                if (userInfo.usrId !== userId) return;
                clearInterval(this.Loop);
                this.Loop = setTimeout(function () {

                    api.confirm({
                        title: '提示',
                        msg: '确认删除该条评论吗？',
                        buttons: ['确定', '取消']
                    }, function (ret, err) {
                        if (ret.buttonIndex === 1) {

                            post('/client/studyMoment/delMsg', {
                                studyMomentMsgId: studyMomentMsgId
                            }, function (ret) {
                                msgUtil.toast({
                                    msg: ret.message
                                })
                                if (ret.isSuccess) {
                                    $this.pageNum = 1;
                                    $this.getMsgList(curStudyMoment.studyMomentId, curStudyMoment.msgList);
                                }
                            });
                        }
                        $this.curMsgId = '';
                    });
                }, 1000);
            },
            clearLoop() {
                var $this = this;
                $this.curMsgId = '';
                clearInterval(this.Loop);
            },
        }
    });
</script>
</body>
</html>
